/*
    定位：
        在页面开发是，存在需要元素叠加才能组成最终显示效果
        页面布局时是可以通过元素脱离文档流的方式，将元素分于不通过层
        定位就是通过脱离文档流的分层方式，实现元素的叠加操作
    定位样式：
        position: static | relative | absolute | fiexd | sticky
            + static 静态定位 - 常规文档流的元素位置规则 - 元素的默认规则
            + relative 相对定位 - 相对于元素未脱离文档流之前的位置进行脱离后的位置描述
                                 相对定位元素会继续保留该元素脱离文档流之前的位置
            + absolute 绝对定义 - 相对于该元素的最近的祖辈非静态元素进行位置描述，
                                 如果祖辈不存在非静态元素，相对于 body 元素进行定位
                                 绝对定位的元素不会保留元素脱离文档流之前的位置，
                                 同时也不会要求原文档的内容必须显示
            + fiexd 固定定位 - 相对视窗进行元素的位置描述
                              祖辈元素如果存在 transform,filter 等特殊样式，定位会相对该祖辈元素
                              固定定位不会在原文档中保留位置，会遮盖原文档内容
            | sticky 粘性定位 - 相对最近的一个具有滚动功能的祖辈元素进行位置描述
                               粘性定位中，位置样式实际上是一个滚动临界值，
                               当粘性定位元素在滚动条滚动式，该元素位置等于临界值时触发“固定定位特性”
                               元素位置未达临界值时和普通元素一样
    定位是需要配合位置的相对偏移量 ： top: | bottom: | left: | right:
    定位元素默认存在的位置层级关键 ： 脱离文档流的元素会按照定义元素顺序，由上而下提供定位层级
                                层级越高的越不容易被遮盖
                                也可以通过调整 z-index 属性取值调整脱离文档流的元素的层级关系
                                原文档的元素元素z-index层级为 0 ，脱离文档流的元素以0为分解点分别定义元素的层级关系
*/
li{
    background-color: bisque;
    padding: 4px;
    margin-bottom: 10px;
    width: 200px;
}
.rel-item{
    color: brown;
    position: relative;
    left: 200px;
    /*top:50px;*/
}
.div-box{
    border: 1px solid black;
    width: 100%;
    position: relative;
}
.ul-box{
    border: 1px solid black;
    position: relative;
}
.abs-item{
    color: rebeccapurple;
    position: absolute;
    opacity: 0.8;
    top:20px;
    left: 300px;
}

.fiexd-item{
    color: blue;
    position: fixed;
    opacity: 0.8;
    top: 20px;
    left: 100px;
}
.sticky-box{
     border: 1px solid black;
    height: 300px;
    overflow: scroll;
}
.st-item{
    /*background-color: rgba(100, 149, 237, 0.3);*/
    background-color: rgba(100, 149, 237, 1);
    position: sticky;
    top: 10px;
}
.box-w-h{
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0px;
    /*left: 0px;*/
    right: 0px;
    bottom: 0px;
}